import { Space, Switch, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import { queryData } from './api/index';
import axios from './api/axios';
import './App.css';

const App = () => {
  let [data, setData] = useState([]);
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      width: '25%',
      render: (name, record) => (
        <a onClick={() => handleClick(name, record)}>{name}</a>
      ),
    },
    {
      title: 'uri',
      dataIndex: 'uri',
      width: '12%',
    },
  ];
  /* const data = [
    {
      applicationType: 0,
      name: '业务类接口',
      desc: '计价规则、预估价格、创建订单、取消订单、司机位置、订单详情、事件响应、司机评价、账单详情、附近车辆、取消规则',
      messageInfo: [
        '查询预估',
        '创建订单',
        '取消订单',
        '查询车辆位置',
        '查询订单详情',
        '账单详情',
        '渠道订单事件通知',
        '评价司机',
        '查询计价规则',
        '查询附近司机',
        '查询取消规则',
        '获取虚拟手机号',
        '查询开放城市',
        '计价规则V2',
        '修改目的地',
        '用车轨迹',
        '取消规则v2',
        '聚合客诉判责通知',
        '拉黑司机',
        '取消拉黑司机',
      ],
      details: [
        {
          id: 1,
          name: '查询预估',
          docUrl: 'https://open.saicmobility.com/documentCenter/791-',
          uri: '/openapi/order/estimateinfo',
        },
        {
          id: 2,
          name: '创建订单',
          docUrl: 'https://open.saicmobility.com/documentCenter/900-',
          uri: '/openapi/order/create-v2',
        },
        {
          id: 3,
          name: '取消订单',
          docUrl: 'https://open.saicmobility.com/documentCenter/794-',
          uri: '/openapi/order/cancel',
        },
        {
          id: 4,
          name: '查询车辆位置',
          docUrl: 'https://open.saicmobility.com/documentCenter/796-',
          uri: '/openapi/driver/location',
        },
      ],
    },
    {
      applicationType: 1,
      name: '财务类接口',
      desc: '申请发票、发票查询、重发电子发票、废弃发票、查询可开票金额',
      messageInfo: [
        '申请发票',
        '查询发票',
        '重发电子发票',
        '废弃发票',
        '查询可开票金额',
      ],
      details: [
        {
          id: 7,
          name: '申请发票',
          docUrl: 'https://open.saicmobility.com/documentCenter/796-',
          uri: '/openapi/driver/location',
        },
        {
          id: 8,
          name: '查询发票',
          docUrl: 'https://open.saicmobility.com/documentCenter/796-',
          uri: '/openapi/driver/location',
        },
      ],
    },
    {
      applicationType: 2,
      name: '支付类接口',
      desc: '支付状态同步',
      messageInfo: ['同步支付状态', '商户确认退款通知'],
      details: [
        {
          id: 10,
          name: '同步支付状态',
          docUrl: 'https://open.saicmobility.com/documentCenter/796-',
          uri: '/openapi/driver/location',
        },
        {
          id: 55,
          name: '商户确认退款通知',
          docUrl: 'https://open.saicmobility.com/documentCenter/796-',
          uri: '/openapi/driver/location',
        },
      ],
    },
    {
      applicationType: 3,
      name: '客服类接口',
      desc: '订单投诉接口',
      messageInfo: ['投诉司机'],
      details: [
        {
          id: 24,
          name: '投诉司机',
          docUrl: 'https://open.saicmobility.com/documentCenter/796-',
          uri: '/openapi/driver/location',
        },
      ],
    },
  ]; */
  let handleClick = (name, record) => {
    if (!record.details) {
      console.log(name, record);
      // window.location.href=record.docUrl;
      // PerformanceResourceTiming.push(record.desc);
    }
  };
  let queryDataTable = async () => {
    let res = await axios.get('http://127.0.0.1:5502/data.json');
    let data = res.apis.map((item, index) => {
      return {
        ...item,
        id: item.applicationType + 'x',
      };
    });
    // console.log(data);
    setData(data);
  };

  useEffect(() => {
    queryDataTable();
  }, []);
  return (
    <div className='App'>
      <Table
        pagination={false}
        columns={columns}
        dataSource={data}
        childrenColumnName='details'
        rowKey='id'
        defaultExpandedRowKeys={['1x']}
      />
    </div>
    // rowKey='applicationType'
  );
};

export default App;
